---
name: useControllableValue
route: /useControllableValue
menu: 'State'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

# useControllableValue

在某些组件开发时，我们需要组件的状态即可以自己管理，也可以被外部控制，`useControllableValue` 就是帮你管理这种状态的 Hook。

## 代码演示

### 非受控组件

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='非受控组件' description='如果 props 中没有 value，则组件内部自理 state'>
  <Demo1 />
</JackBox>

### 受控组件

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='受控组件' description='如果 props 有 value 字段，则由父级接管控制 state'>
  <Demo2 />
</JackBox>

### 无 value，有 onChange 的组件

<JackBox jsCode={Demo3CodeJsx} tsCode={Demo3CodeTsx} demoName='无 value，有 onChange 的组件' description='只要 props 中有 onChange 字段，则在 state 变化时，就会触发 onChange 函数'>
  <Demo3 />
</JackBox>

## API

```javascript
const [state, setState] = useControllableValue(props: object, options?: Options)
```

### Result

| 参数     | 说明              | 类型                 |
|----------|-------------------|----------------------|
| state    | 状态值            | -                    |
| setState | 修改 state 的函数 | (value: any) => void |

### Params

| 参数    | 说明                   | 类型   | 默认值 |
|---------|------------------------|--------|--------|
| props   | 组件的 props           | object | -      |
| options | 可选配置项，见 Options | -      | -      |


### Options

| 参数                 | 说明                                                | 类型   | 默认值         |
|----------------------|-----------------------------------------------------|--------|----------------|
| defaultValue         | 默认值，会被 props.defaultValue 和 props.value 覆盖 | -      | -              |
| defaultValuePropName | 默认值的属性名                                      | string | 'defaultValue' |
| valuePropName        | 值的属性名                                          | string | 'value'        |
| trigger              | 修改值时，触发的函数                                | string | 'onChange'     |